<template>
	<view class="page">
		<!-- 不带边框并矩形显示 -->
		<uni-grid :column="4" :show-border="false" :square="false">
			<uni-grid-item><uni-tag text="上门维修" :type="typeIndex == 0 ? 'error' : 'default'" :circle="true" @click="serviceType(0)"></uni-tag></uni-grid-item>
			<uni-grid-item><uni-tag text="家政服务" :type="typeIndex == 1 ? 'error' : 'default'" :circle="true" @click="serviceType(1)"></uni-tag></uni-grid-item>
			<uni-grid-item><uni-tag text="快递取件" :type="typeIndex == 2 ? 'error' : 'default'" :circle="true" @click="serviceType(2)"></uni-tag></uni-grid-item>
			<uni-grid-item><uni-tag text="快速搬家" :type="typeIndex == 3 ? 'error' : 'default'" :circle="true" @click="serviceType(3)"></uni-tag></uni-grid-item>
		</uni-grid>
		<uni-grid :column="3" :show-border="false" :square="false">
			<uni-grid-item>
				<uni-tag
					:text="'好评' + (goodOrder == 0 ? up : down)"
					:type="conIndex == 0 ? 'success' : 'default'"
					:circle="false"
					@click="conditionIndex(0)"
					inverted="true"
				></uni-tag>
			</uni-grid-item>
			<uni-grid-item>
				<uni-tag
					:text="'价格' + (priceOrder == 0 ? up : down)"
					:type="conIndex == 1 ? 'success' : 'default'"
					:circle="false"
					@click="conditionIndex(1)"
					inverted="true"
				></uni-tag>
			</uni-grid-item>
			<uni-grid-item><uni-tag :text="searchPlaceHolder" type="primary" :circle="false" @click="searchByKey" inverted="true"></uni-tag></uni-grid-item>
		</uni-grid>
		<view class="services-list">
			<view v-for="item in servicesList"  class="services-item" @click="serviceDetail(item.merchantInfo.smiId)">
				<view class="image-wrapper"><image :src="item.merchantInfo.pic" mode="aspectFill"></image></view>
				<text class="title clamp">{{item.merchantInfo.smiName}}</text>
				<text class="title clamp">{{item.merchantInfo.describation}}</text>
				<view class="price-box">
					<text class="price">{{item.merchantInfo.price}}</text>
					<view v-show="item.merchantInfo.isAvailable==0"><text  style="color: #F76260;">●</text>已停止服务</view>
					<view  v-show="item.merchantInfo.isAvailable==1"><text style="color: #09BB07;">●</text>可提供服务</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
import uniTag from '@/components/uni-tag/uni-tag.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: { uniGrid, uniGridItem, uniTag, uniLoadMore },
	data() {
		return {
			servicesList: [],
			rows: 10,
			page: 1,
			up: '↑',
			goodOrder: 0, //0代表好评从低到高，1代表高到低
			priceOrder: 0, //0代表价格从低到高，1代表高到低
			down: '↓',
			isGet: true,
			loadTxt: '',
			searchPlaceHolder:'搜索',
			searchKey:'',
			typeIndex: 0, //0，1，2，3分别代表上门维修，家政服务，快递取件，快速搬家
			conIndex: 0, //0代表好评，1代表价格
			serviceData: [
				{
					id: 1,
					name: '服务1',
					desc: '家政服务描述',
					level: 5
				},
				{
					id: 2,
					name: '服务2',
					desc: '家政服务描述',
					level: 4
				},
				{
					id: 3,
					name: '服务3',
					desc: '家政服务描述',
					level: 5
				},
				{
					id: 4,
					name: '服务4',
					desc: '家政服务描述',
					level: 5
				}
			]
		};
	},
	//页面加载之后的操作
	onLoad() {
		//先获取关键字，有的话关键字模糊搜索，没有按照默认的加载
		this.searchKey = this.$store.state.serviceSearchBarText;
		if(this.searchKey){
			this.searchPlaceHolder=this.searchKey
		}
		this.productList = this.goodslist;
		//加载商家服务列表数据
		this.getServiceList()
	},
	methods: {
		//搜索的方法
		searchByKey() {
			uni.navigateTo({
				url: 'searchBar'
			});
		},
		//获取便民服务列表的方法
		getServiceList() {
			uni.request({
				url: this.baseurl + '/merchantInfo/allByCondition',
				data: this.getConditionData(),
				success:res=>{
					//替换原来的数据列表
					this.servicesList=res.data.data
				}
			});
		},
		//获取查询的条件对象（包含服务类别，查询条件：价格好评高低，关键字）
		getConditionData() {
			if (this.conIndex) {
				return {
					typeIndex: this.typeIndex, //服务的类别
					priceOrder: this.priceOrder,
					searchKey:this.searchKey//模糊查询的关键字
				}
			}
			return {
				typeIndex: this.typeIndex, //服务的类别
				goodOrder: this.goodOrder,
				searchKey:this.searchKey//模糊查询的关键字
			}
		},
		conditionIndex(index) {
			//如果一样需要改变排序的状态，比如好评从高到低，价格高到低或者低到高
			if (index == this.conIndex) {
				if (this.conIndex == 0) {
					this.goodOrder = (this.goodOrder + 1) % 2;
				}
				if (this.conIndex == 1) {
					this.priceOrder = (this.priceOrder + 1) % 2;
				}
			}
			this.conIndex = index;
			this.getServiceList()
		},
		serviceDetail(smiId) {
			uni.navigateTo({
				url: 'serviceDetail?smiId='+smiId
			});
		},
		serviceType(index) {
			if(this.typeIndex!=index){
				this.typeIndex = index;
				//根据不同类型加载替换数据
				this.getServiceList()
			}
		}
	}
};
</script>

<style lang="scss">
/* 商品列表 */
.services-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 30upx;
	background: #fff;
	.services-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 40upx;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 330upx;
		border-radius: 3px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: $font-lg;
		color: $font-color-dark;
		line-height: 80upx;
	}
	.price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10upx;
		font-size: 24upx;
		color: $font-color-light;
	}
	.price {
		font-size: $font-lg;
		color: $uni-color-primary;
		line-height: 1;
		&:before {
			content: '￥';
			font-size: 26upx;
		}
	}
}
</style>
